<template>
  <div class="introduce">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="课程简介" name="introduce">
        <!-- <div
          class="introduceInfo"
          v-for="(item, index) in introduceData"
          :key="'introduce' + index"
        >
          <div class="title">{{ item.title }}</div>
          <div class="content">{{ item.content }}</div>
        </div> -->
        <div class="introduceInfo" v-html="description"></div>
      </el-tab-pane>
      <el-tab-pane label="评论" name="review" class="review">
        <div class="commentArea">
          <div class="userHead">
            <img src="@/assets/footerBg.png" alt="" />
          </div>
          <div class="commentRgt">
            <el-input
              class="textarea"
              type="textarea"
              :rows="3"
              resize="none"
              placeholder="请输入内容"
              v-model="comment"
            >
            </el-input>
            <CustomButton
              class="customButton"
              type="primary"
              :disabled="!comment"
              @click="sendComment"
            >
              发表评论
            </CustomButton>
          </div>
        </div>
        <div class="commentList" v-if="commentList.length">
          <div
            class="commentItem"
            v-for="(item, index) in commentList"
            :key="'comment' + index"
          >
            <div class="userHead">
              <img src="@/assets/footerBg.png" alt="" />
            </div>
            <div class="commentRgt">
              <div class="user">
                <div class="userName">{{ item.creater }}</div>
                <div class="time">{{ item.createTime }}</div>
              </div>
              <div class="userComment">
                <div class="comment">
                  {{ item.comment }}
                </div>
                <div class="like">
                  <!-- <img class="like-icon" src="@/assets/like_icon.png" alt="" />
                  赞 -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pagination" v-if="commentList.length">
          <CustomPagination
            layout="prev, pager, next"
            :total-items="commentTotal"
            :page-size="pageSize"
            :current-page="pageNum"
            @pagination-current-change="handleCurrentChange"
          ></CustomPagination>
        </div>
        <el-empty v-if="!commentList.length" description="暂无数据"></el-empty>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import CustomButton from '@/components/CustomButton';
import { getCourseComment, addCourseComment } from '@/api/course';
import CustomPagination from '@/components/CustomPagination';
export default {
  components: { CustomButton, CustomPagination },
  props: {
    queryParams: {
      type: Object,
      default: null,
    },
    description: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      comment: '',
      introduceData: [],
      activeName: 'introduce',
      commentList: [],
      commentTotal: 0,
      pageSize: 10,
      pageNum: 1,
    };
  },
  created() {},
  mounted() {
    this.getComment();
  },
  methods: {
    // 获取评论
    async getComment() {
      try {
        const params = {
          relatedId: this.queryParams.id,
          apprType: '',
          pageSize: this.pageSize,
          pageNum: this.pageNum,
        };
        const resData = await getCourseComment(params);
        this.commentList = resData.list;
        this.commentTotal = resData.total;
      } catch (error) {
        console.error(error);
      }
    },
    // 处理当前页变化的逻辑
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getComment();
    },
    // 点击tab
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 发表评论
    async sendComment() {
      try {
        const params = {
          comment: this.comment,
          relatedId: this.queryParams.id,
        };
        await addCourseComment(params);
        this.comment = '';
        this.$message.success('评论成功，等待审核');
      } catch (error) {
        console.error(error)
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.introduce {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: $box-shadow;
  margin-top: 32px;
  box-sizing: border-box;
  padding: 20px 20px 0px;
  ::v-deep .el-tabs__nav-wrap {
    &:after {
      display: none;
    }
    .el-tabs__item {
      font-size: 20px;
      font-weight: 600;
      height: 36px;
      line-height: 28px;
      color: $text-title-color;
    }
    .el-tabs__active-bar {
      height: 2Px;
      background-color: $primary-color;
    }
  }
  .introduceInfo {
    margin-top: 24px;
    padding-bottom: 60px;
    .title {
      font-size: 16px;
      font-weight: 600;
      line-height: 22px;
      color: $text-color;
    }
    .content {
      margin-top: 12px;
      padding-left: 12px;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      color: $text-color-secondary;
    }
  }
  .commentArea {
    display: flex;
    margin-top: 24px;
    .userHead {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .commentRgt {
      margin-left: 8px;
      .textarea {
        width: 942px;
        height: 80px;
        ::v-deep .el-textarea__inner {
          width: 942px;
          height: 80px;
          padding: 10px;
          box-sizing: border-box;
          border: none;
          line-height: 20px;
          font-size: 14px;
          font-weight: 400;
          background: $page-background-color;
          color: $text-color-secondary;
        }
      }
      .customButton {
        padding: 9px 32px;
        margin-top: 12px;
        float: right;
      }
    }
  }
  .commentList {
    .commentItem {
      width: 100%;
      padding-top: 16px;
      padding-bottom: 16px;
      box-sizing: border-box;
      display: flex;
      border-bottom: 1px solid #f0f0f0;
      // &:first-child {
      //   border-top: 1px solid rgba(0, 0, 0, 0);
      // }
      .userHead {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .commentRgt {
        flex: 1;
        margin-left: 8px;
        .user {
          display: flex;
          align-items: center;
          .userName {
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
            color: $text-color;
          }
          .time {
            margin-left: 12px;
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
            color: $text-color-secondary;
          }
        }
        .userComment {
          display: flex;
          justify-content: space-between;
          margin-top: 4px;
          line-height: 20px;
          color: $text-color;
          .comment {
            width: 880px;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
          }
          .like {
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
            color: $text-color-secondary;
            display: flex;
            align-items: center;
            cursor: pointer;
            .like-icon {
              width: 16px;
              height: 16px;
              margin-right: 6px;
            }
          }
        }
      }
    }
  }
  .pagination {
    padding: 14px; /* 举例内边距 */
    text-align: center;
    margin-bottom: 20px;
  }
}
</style>
